<template>
  <div class="page">
    <c-title :hide="false" text="日间照料"></c-title>
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in pricList" :key="index"><img :src="item.thumb" /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="bottom">
      <h3>项目列表</h3>
      <div v-for="(item, index) in lieList" :key="index"  @click="datashow(item.id)">
        <div class="nameclass">
          <div>{{ item.name }}</div>
        </div>
        <img :src="item.thumb" />
        <p>立即预约</p>
      </div>

      <van-dialog v-model="diashow" confirm-button-text="确认" cancel-button-text="取消" show-cancel-button title="预约信息" :before-close="onclose">
        <van-form>
          <van-cell-group inset>
            <van-field v-model="form.date" is-link readonly label="预约时间" placeholder="请输入开始时间" @click="dateshow = true" />
            <van-field v-model="form.price" type="number" name="金额" label="金额" placeholder="请填写金额" :rules="[{ required: true }]" />
            <van-field v-model="form.num" type="digit" name="人数" label="人数" placeholder="请填写预约人数" :rules="[{ required: true }]" />
            
          </van-cell-group>
        </van-form>
      </van-dialog>
      <van-popup v-model="dateshow" position="bottom">
              <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />
            </van-popup>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      diashow: false,
      dateshow: false,
      showPicker: false,
      price: null,
      num: null,
      currentDate: new Date(),
      minDate: new Date(),
      datavalue: "",
      form: {
        num: null, //数量
        price: null, //价格
        date: null, //日期
        uid: null, //id
        project_id: 0, //项目id
        member_id: null //数量
      },
      id: "",
      pricList: [],
      lieList: [],
      Piclist: [{ img: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" }, { img: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" }]
    };
  },
  activated() {
    this.getuser();
    this.getLsit();
  },
  methods: {
    getuser() {
      $http.post("member.member.member-data").then(response => {
        this.id = response.data.member.uid;
      });
    },
    getLsit() {
      $http
        .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
          category_id: 6,
          store_id:27,
        })
        .then(response => {
          this.pricList = response.json;
        });

      $http.post("plugin.store-cashier.frontend.store.store-project.index ", {}).then(response => {
        this.lieList = response.data.data;
      });
    },

    formatDate(datavalue) {
      return `${datavalue.getFullYear()}/${datavalue.getMonth() + 1}/${datavalue.getDate()}`;
    },
    datashow(project_id) {
      this.diashow = true;
      this.form.project_id = project_id;
    },
    onConfirm(datavalue) {
      this.dateshow = false;
      this.form.date = this.formatDate(datavalue);
    },
    onclose(action, done) {
      // 获取会员id
      if (action == "confirm") {
        if (this.form.num != "" && this.form.price != "" && this.form.date != "") {
          // 预约信息填充并发送请求
          $http
            .post("plugin.store-cashier.frontend.store.store-project.add_project", {
              member_id: this.id,
              project_id: this.form.project_id,
              store_id: 27,
              yuyue_time: this.form.date,
              num: this.form.num,
              price: this.form.price
            })
            .then(response => {
              if (response.result == 1) {
                Toast(response.msg);
              }
            });
          this.form = {};
          return done(true);
        } else {
          Toast("请输入完整信息");
          return done(false);
        }
      } else {
        this.form = {};
        return done();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.my-swipe .van-swipe-item {
  img {
    height: 10rem;
    width: 100%;
  }
}
.bottom {
  h3 {
    margin: 1rem 18rem 0.5rem 0rem;
    font-size: 1rem;
  }
  img {
    border-radius: 1rem;
    width: 100%;
    height: 11rem;
  }
  p {
    z-index: 2;
    margin-left: 18rem;
    position: relative;
    top: -2rem;
    color: #39a9ed;
  }
  .nameclass {
    position: relative;
    top: 6rem;
    font-weight: 600;
  }
}
</style>